<template>
    <el-dialog v-loading="loading" :visible="visible" :title="$t('inventoryManagement.inspectionItems')" width="1000px" append-to-body top="14vh" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" @close="onClose" @open="onOpen">
        <div>
            <el-form :model="searchForm" size="small" label-position="left" label-suffix=":" ref="searchForm" label-width="80px">
                <el-row :gutter="24">
                    <el-col :span="6">
                        <!--            检验项目名称-->
                        <el-form-item :label="$t('basicData.inspectProjectName')" prop="projectName">
                            <el-input v-model="queryParams.projectName" :placeholder="$t('public.placeholder',{placeholder: $t('basicData.inspectProjectName')})" size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!--            检验项目名称-->
                        <el-form-item :label="$t('basicData.inspectProjectCode')" prop="projectCode">
                            <el-input v-model="queryParams.projectCode" :placeholder="$t('public.placeholder',{placeholder: $t('basicData.inspectProjectCode')})" size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!--            项目类型：-->
                        <el-form-item :label="$t('basicData.projectType')" prop="projectType">
                            <el-select v-model="queryParams.projectType" filterable size="small" reserve-keyword :placeholder="$t('public.inputPl')+$t('basicData.projectType')">
                                <el-option v-for="item in projectLists" :key="item.value" :label="item.label" :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                        
                    <el-col :span="6">
                        <el-form-item label-width="10px">
                            <el-button type="primary" icon="el-icon-search" class="search-btn" @click="getList" size="mini">{{ $t("public.search") }}</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="reset">{{ $t("public.reset") }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="container-table">
                <el-table max-height="350" border stripe :data="tableList" v-loading="loading">
                        <el-table-column :label="$t('public.serialNum')" type="index" width="50" align="center">
                            <template slot-scope="scope">
                                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('basicData.projectType')" align="left" prop="projectType" minWidth="160" />
                        <!--          检验项目名称-->
                        <el-table-column :label="$t('basicData.inspectProjectName')" align="left" prop="projectName" minWidth="160" />
                        <el-table-column :label="$t('basicData.inspectProjectCode')" align="left" prop="projectCode" minWidth="160" />

                        <el-table-column :label="$t('public.opera')" align="center" width="100">
                            <template slot-scope="scope">
                                <a class="action-wrap" @click="choose(scope)" style="color:#5a9eaf">
                                    {{$t('rule.select')}}
                                </a>
                            </template>
                        </el-table-column>
                    </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
            </div>
        </div>
        <div slot="footer">
            <el-button size="mini" type="default" icon="el-icon-close" @click="handleConfirm">{{ $t("btn.close") }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {
    listTemplate,
    getItemsByTemplateName,
} from '@/api/inspectionManagement/inspectionManagement'

import {listProject} from '@/api/basic/project'
import {getDicts} from "@/api/basic/dict/data"

export default {
    name: 'MaterialDialog',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            total: 1,
            templateList: [],
            searchForm: {
                materialName: null,
                materialNo: null,
                materialType: null,
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            loading: false,
            data: null,
            title: '',
            projectLists: [],
            tableList: [],

            row:{},
            index: null,
        }
    },
    methods: {
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                templateName: null,
                dataSource: '1'
            }
            this.getList()
        },
        getList() {
            this.loading = true
            listProject({
                ...this.queryParams,
                ...this.searchForm, 
            }).then((response) => {
                if (response.code == 200 && response.rows) {
                    this.tableList = response.rows
                    this.total = response.total
                }
                this.loading=false
            }).finally(()=>{
                this.loading=false
            })
        },
        // 窗口打开
        onOpen() {
            this.getList()
            this.getDictslist()
        },
        getDictslist(){
            getDicts('NYIQC_PROJECT_TYPE').then(res=>{
                this.projectLists=res.data.map(item=>{
                    return {
                        value:item.dictValue,
                        label:item.dictLabel,
                    }
                })
            })
        },
        // 窗口关闭
        onClose() {
            this.data = null
        },
        handleConfirm() {
            this.$emit('update:visible', false)
        },
        choose(scope) {
            console.log(scope)
            this.loading = true
            this.$emit('callback', scope.row)
            this.$emit('update:visible', false)
            // 赋值
            this.row.projectCode =  scope.row?.projectCode
            this.row.projectType =  scope.row?.projectType
            this.row.projectId =    scope.row?.projectId
            this.row.projectName =  scope.row?.projectName
            this.loading = false
        },
        // 窗口关闭前执行
        close() {
            this.$emit('update:visible', false)
        },
        handleOpen(row,index){
            this.row = row
            this.index = index;
        }
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
</style>
